<template>
  <div class="background">
    <div>

      <!--项目进度与任务-->
      <el-tabs type="border-card" class="etab" >
        <el-tab-pane>
          <span slot="label" style="font-size: 18px">项目进度与任务</span>

          <!--        超时显示-->
          <div class="deadline" style="background-color:whitesmoke">
            <span class="deadspe" style="color: grey">截止当前，时间总延迟 </span>
            <span class="deadspe1" style="color: red" v-text=this.act.delay>0</span>
            <span class="deadspe2" style="color: grey"> 天，工作量超支 </span>
            <span class="deadspe3" style="color: red " v-text=this.act.overspend>0</span>
            <span class="deadspe4" style="color: grey"> 人/日</span>
          </div>
          <br><br><br>

          <!--时间线一-->
          <div class="container">
            <div class="row">
              <div class="col">
                <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
                  <div class="timeline-step" v-for="(item,index) in list" :key="index">
                    <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top"
                         title=""
                         data-content="And here's some amazing content. It's very engaging. Right?"
                         data-original-title="2003"
                    >
                      <div class="inner-circle"></div>
                      <p class="h6 mt-3 mb-1">{{ item.time }}</p>
                      <p class="h6 text-muted mb-0 mb-lg-0">{{ item.stage }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--饼状图-->
          <div class="pie">
            <div id="task" style="width: 480px; height: 340px; float:left"></div>
            <div id="requirement" style="width: 480px; height: 340px;  float:left"></div>
            <div id="flaw" style="width: 480px; height: 340px;  float:left;"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--项目信息-->
    <el-tabs type="border-card" class="etab1">
      <el-tab-pane>
        <span slot="label" style="font-size: 18px">项目信息</span>
        <el-row :gutter="20">
          <el-col :span="3"><div class="grid-content ">项目名称</div></el-col>
          <el-col :span="3"><div class="grid-content ">{{projectinfo.pname}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">项目金额</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectinfo.amount}}万元</div></el-col>
          <el-col :span="3"><div class="grid-content ">客户名称</div></el-col>
          <el-col :span="3"><div class="grid-content ">{{projectinfo.amount}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">当前阶段</div></el-col>
          <el-col :span="3"><div class="grid-content ">{{projectinfo.stage}}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3"><div class="grid-content ">项目主管</div></el-col>
          <el-col :span="3"><div class="grid-content ">{{projectinfo.hoster}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">项目经理</div></el-col>
          <el-col :span="3"><div class="grid-content ">{{projectinfo.manager}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">项目类型</div></el-col>
          <el-col :span="3"><div class="grid-content ">{{projectinfo.category}}</div></el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>


    <!--进度统计-->
    <el-tabs type="border-card" class="etab1">
      <el-tab-pane>
        <span slot="label" style="font-size: 18px">进度统计</span>

        <el-row :gutter="20">
          <el-col :span="3"><div class="grid-content ">实际进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.actualProgress}}%</div></el-col>
          <el-col :span="3"><div class="grid-content ">年初进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.beginProgress}}%</div></el-col>
          <el-col :span="3"><div class="grid-content ">季初进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.quarterProgress}}%</div></el-col>
          <el-col :span="3"><div class="grid-content ">上月进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.lastmonthProgress}}%</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3"><div class="grid-content ">下月进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.nextmonthProgress}}%</div></el-col>
          <el-col :span="3"><div class="grid-content ">季末进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.quarterendProgress}}%</div></el-col>
          <el-col :span="3"><div class="grid-content ">年末进度</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectprogressinfo.yerendProgress}}%</div></el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!--节点日期-->
    <el-tabs type="border-card" class="etab1">
      <el-tab-pane>
        <span slot="label" style="font-size: 18px">节点日期</span>
        <el-row :gutter="20">
          <el-col :span="3"><div class="grid-content ">立项日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectdateinfo.beginDate}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">计划上线日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectdateinfo.planDate}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">计划初验日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectdateinfo.planBegindate}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">计划终验日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{projectdateinfo.planEnddate}}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3"><div class="grid-content "></div></el-col>
          <el-col :span="3"><div class="grid-content "></div></el-col>
          <el-col :span="3"><div class="grid-content ">实际上线日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold;color: red">{{projectdateinfo.actualDate}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">实际初验日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold;color: red">{{projectdateinfo.actualBegindate}}</div></el-col>
          <el-col :span="3"><div class="grid-content ">实际终验日期</div></el-col>
          <el-col :span="3"><div class="grid-content " style="font-size: 20px; font-weight: bold;color: red">{{projectdateinfo.actualEnddate}}</div></el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!--计划与实际-->
    <el-tabs type="border-card" class="etab1">
      <el-tab-pane>
        <span slot="label" style="font-size: 18px">计划与实际</span>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content " style="font-size: 24px"><br>收入完成情况</div></el-col>
          <el-col :span="8"><div class="grid-content " style="font-size: 24px"><br>成本投入情况</div></el-col>
          <el-col :span="8"><div class="grid-content " style="font-size: 24px"><br>核算利润情况</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7"><div class="grid-content ">
            <el-progress :text-inside="true" v-if="!isNaN(parseFloat(((this.act.product/this.act.income)*100).toFixed(2)))" :stroke-width="26" :percentage=parseFloat(((this.act.product/this.act.income)*100).toFixed(2))></el-progress>
          </div></el-col>
          <el-col :span="7" :offset="1"><div class="grid-content ">
<!--            <el-progress :text-inside="true" :stroke-width="26" :percentage=Number((this.act.actcost/this.act.plancost)*100).toFixed(2)></el-progress>-->
            <el-progress :text-inside="true" v-if="!isNaN(parseFloat(((this.act.actcost/this.act.plancost)*100).toFixed(2)))" :stroke-width="26" :percentage=parseFloat(((this.act.actcost/this.act.plancost)*100).toFixed(2))></el-progress>
          </div></el-col>
          <el-col :span="7" :offset="1"><div class="grid-content ">
            <el-progress :text-inside="true" v-if="!isNaN(parseFloat(((this.act.expense/this.act.planbudget)*100).toFixed(2)))" :stroke-width="26" :percentage=parseFloat(((this.act.expense/this.act.planbudget)*100).toFixed(2))></el-progress>
          </div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2"><div class="grid-content ">计划收入</div></el-col>
          <el-col :span="6"><div class="grid-content " style="font-size: 20px; font-weight: bold" >{{this.act.income}}万元</div></el-col>
          <el-col :span="2"><div class="grid-content ">计划成本</div></el-col>
          <el-col :span="6"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{this.act.plancost}}万元</div></el-col>
          <el-col :span="2"><div class="grid-content ">预算</div></el-col>
          <el-col :span="6"><div class="grid-content " style="font-size: 20px; font-weight: bold">{{this.act.planbudget}}万元</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2"><div class="grid-content ">实际产值</div></el-col>
          <el-col :span="6"><div class="grid-content " style="font-size: 20px; font-weight: bold;color: red">{{this.act.product}}万元</div></el-col>
          <el-col :span="2"><div class="grid-content ">实际成本</div></el-col>
          <el-col :span="6"><div class="grid-content " style="font-size: 20px; font-weight: bold ;color: red">{{this.act.actcost}}万元</div></el-col>
          <el-col :span="2"><div class="grid-content ">实际费用</div></el-col>
          <el-col :span="6"><div class="grid-content " style="font-size: 20px; font-weight: bold;color: red">{{this.act.expense}}万元</div></el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { getProjectDetailData, getProjectTimeData ,gettasks,getrequirements,getflaws,getact,getProjectDateInfo , getProjectProgressInfo} from '@/api/project'

export default {
  data() {
    return {
      projectinfo:{
        pname:'棚户区改造',
        amount:'76.3',
        customer:'电信运营商',
        hoster:'关羽',
        manager:'马谡',
        stage:'项目启动',
        category:'战争'
      },
      delay: 30,   //总延迟时间
      overspend: 180,    //超支时间
      tasks: {         //任务
        // closed: 20,
        // completed: 20,
        // notStart: 11,
        // underway: 33
      },
      requirements: {         //需求
        completed: 30,
        notStart: 20,
        underway: 60
      },
      flaws: {         //缺陷
        completed: 25,
        closed: 33,
        uncomfirmed: 22,
        underway: 55
      },
      act:{},
      //时间线一数据
      list: [],
      projectprogressinfo: {},

      projectdateinfo: {}
    }
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let task = this.$echarts.init(document.getElementById('task'))
      let requirement = this.$echarts.init(document.getElementById('requirement'))
      let flaw = this.$echarts.init(document.getElementById('flaw'))

      // 指定图表的配置项和数据
      let tasks = {
        title: {
          text: '任务'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            name: '任务表',
            selectedMode: 'single',
            data: [
              {
                value: this.tasks.closed,
                name: '已关闭'
              },
              {
                value: this.tasks.completed,
                name: '已完成'
              },
              {
                value: this.tasks.notStart,
                name: '未开始'
              },
              {
                value: this.tasks.underway,
                name: '进行中'
              }
            ],
            radius: '55%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }

          }
        ]
      }
      let requirements = {
        title: {
          text: '需求统计'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            name: '需求统计',
            selectedMode: 'single',
            data: [
              {
                value: this.requirements.completed,
                name: '已完成'
              },
              {
                value: this.requirements.notStart,
                name: '未开始'
              },
              {
                value: this.requirements.underway,
                name: '已开始'
              }
            ],
            radius: '55%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      let flaws = {
        title: {
          text: '缺陷'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            name: '缺陷',
            selectedMode: 'single',
            data: [
              {
                value: this.flaws.completed,
                name: '已完成'
              },
              {
                value: this.flaws.closed,
                name: '已关闭'
              },
              {
                value: this.flaws.uncomfirmed,
                name: '未确认'
              },
              {
                value: this.flaws.underway,
                name: '进行中'
              }
            ],
            radius: '55%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      task.setOption(tasks)
      requirement.setOption(requirements)
      flaw.setOption(flaws)
      // income.setOption(incomes);
    },
    drawChart1() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let requirement = this.$echarts.init(document.getElementById('requirement'))

      // 指定图表的配置项和数据
      let requirements = {
        title: {
          text: '需求统计'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            name: '需求统计',
            selectedMode: 'single',
            data: [
              {
                value: this.requirements.completed,
                name: '已完成'
              },
              {
                value: this.requirements.notStart,
                name: '未开始'
              },
              {
                value: this.requirements.underway,
                name: '已开始'
              }
            ],
            radius: '55%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      requirement.setOption(requirements)
    },
    drawChart2() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let flaw = this.$echarts.init(document.getElementById('flaw'))
      // 指定图表的配置项和数据
      let flaws = {
        title: {
          text: '缺陷'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            name: '缺陷',
            selectedMode: 'single',
            data: [
              {
                value: this.flaws.completed,
                name: '已完成'
              },
              {
                value: this.flaws.closed,
                name: '已关闭'
              },
              {
                value: this.flaws.uncomfirmed,
                name: '未确认'
              },
              {
                value: this.flaws.underway,
                name: '进行中'
              }
            ],
            radius: '55%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      flaw.setOption(flaws)
    },
    getProjectTimeLineData(pid){
      getProjectTimeData(pid).then((res)=>{
        this.list = res.data
      })
    },
    getProjectDetailData(pid){
      getProjectDetailData(pid).then((res=>{
        this.projectinfo = res.data
      }))
    },
    gettasks(url){
      gettasks(url).then((res)=>{
        this.tasks=res.data
        this.drawChart()
      })
    },
    getrequirements(url){
      getrequirements(url).then((res)=>{
        this.requirements=res.data
        this.drawChart1()
      })
    },
    getflaws(pid){
      getflaws(pid).then((res)=>{
        this.flaws=res.data
        this.drawChart2()
      })
    },
    getact(pid){
      getact(pid).then((res)=>{
        this.act=res.data
      })
    },
    getProjectProgressInfo(pid){
      getProjectProgressInfo(pid).then((res=>{
        this.projectprogressinfo = res.data

        // console.log(this.projectprogressinfo)
      }))
    },

    getProjectDateInfo(id){
      getProjectDateInfo(id).then((res=>{
        this.projectdateinfo = res.data
        // console.log(res)
      }))
    }
  },
  mounted() {
    // this.drawChart()
  },
  created() {
    this.getProjectTimeLineData(this.$router.currentRoute.params.pid)
    this.getProjectDetailData(this.$router.currentRoute.params.pid)
    this.gettasks("/get/tasks"+"?pid="+this.$route.params.pid)
    this.getrequirements("get/requirements?pid="+this.$route.params.pid)
    this.getflaws(this.$route.params.pid)
    this.getact(this.$route.params.pid)
    this.getProjectProgressInfo(this.$router.currentRoute.params.pid)
    this.getProjectDateInfo(this.$router.currentRoute.params.pid)
  }
}

</script>
<style>

/*超时显示样式*/
.deadline {
  position: absolute;
  width: 410px;
  right: 10px;
  height: 30px;
}

.deadspe {
  position: relative;
  left: 15px;
  top: 5px;
}

.deadspe1 {
  position: relative;
  top: 5px;
  left: 15px;
  font-weight: bold;
  font-size: large;
}

.deadspe2 {
  position: relative;
  left: 15px;
  top: 5px;
}

.deadspe3 {
  position: relative;
  top: 5px;
  left: 15px;
  font-weight: bold;
  font-size: large;
}

.deadspe4 {
  position: relative;
  left: 15px;
  top: 5px;
}


/*时间线一样式*/
body {
  margin-top: 20px;
}

.timeline-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap
}

.timeline-steps .timeline-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 1rem
}

@media (min-width: 768px) {
  .timeline-steps .timeline-step:not(:last-child):after {
    content: "";
    display: block;
    border-top: .25rem dotted #3b82f6;
    width: 3.46rem;
    position: absolute;
    left: 7.5rem;
    top: .3125rem
  }

  .timeline-steps .timeline-step:not(:first-child):before {
    content: "";
    display: block;
    border-top: .25rem dotted #3b82f6;
    width: 3.8125rem;
    position: absolute;
    right: 7.5rem;
    top: .3125rem
  }
}

.timeline-steps .timeline-content {
  width: 10rem;
  text-align: center
}

.timeline-steps .timeline-content .inner-circle {
  border-radius: 1.5rem;
  height: 1rem;
  width: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6
}

.timeline-steps .timeline-content .inner-circle:before {
  content: "";
  background-color: #3b82f6;
  display: inline-block;
  height: 3rem;
  width: 3rem;
  min-width: 3rem;
  border-radius: 6.25rem;
  opacity: .5
}
/*................................................................................................*/

.el-row {
  margin-bottom: 20px;
  &:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
